import React, { Component } from 'react'
import { Button, Table, Modal, Form, Input, message, Switch, Tag } from 'antd'
import { role } from '../../../api//index'
import styles from './index.less'
export default class index extends Component {
    componentDidMount() {
        this.getData()
    }

    getData = async () => {
        const data = await role.getRoleList()
        if (data.code === 200) {
            this.setState({ list: data.data })
        }
    }

    state = {
        list: [],
        visible: false,
        loading: false,
        formRules: {
            description: [
                {
                    required: true,
                    message: '角色描述不能为空',
                },
            ],
            name: [
                {
                    required: true,
                    message: '角色名称不能未空',
                },
            ]
        },
    };

    showModal = (id) => {
        this.setState({ visible: true });
        this.getOne(id)
    }

    getOne = (id) => {
        role.getRoleOne(id).then(data => {
            if (data.id) {
                data.status = this.getStatus(data.status)
                this.formNode.setFieldsValue(data)
            }
        }).catch(err => {
            console.log(err);
        })
    }

    getStatus = (status) => {
        switch (typeof(status)) {
            case 'string':
                switch (status) {
                    case 'y':
                        return true;
                    case 'n':
                        return false;
                }
                break;
        
            case 'boolean':
                switch (status) {
                    case false:
                        return 'n';
                    case true:
                        return 'y';
                }
        }
    }

    changeVisible = params => {
        this.setState({ visible: params })
    }

    handleOk = () => { //提交修改
        this.formNode.submit()
    };

    handleCancel = () => {
        this.setState({ visible: false })
    };

    submit = (values) => { //提交修改
        this.setState({ loading: true });
        values.status = this.getStatus(values.status)
        console.log(values);
    }


    render() {
        const { visible, loading, formRules, list } = this.state;
        const columns = [
            {
                title: '角色ID',
                dataIndex: 'id',
            },
            {
                title: '角色名称',
                dataIndex: 'name',
            },
            {
                title: '科目名称',
                dataIndex: 'name',
            },
            {
                title: '角色描述',
                dataIndex: 'description',
            },
            {
                title: '状态',
                render: (item) => {
                    switch (item.status) {
                        case 'y':
                            return <Tag color="success">正常</Tag>;
                        case 'n':
                            return <Tag color="error">禁用</Tag>
                        default:
                            return
                    }
                }
            },
            {
                title: '操作',
                fixed: 'right',
                render: ({ id }) => {
                    return <Button type='primary' onClick={() => this.showModal(id)}>修改</Button>
                }
            }
        ];
        return (
            <div id="roleList">
                <Table rowKey='id' columns={columns} dataSource={list} />
                <Modal
                    maskClosable={false}
                    keyboard={false}
                    bodyStyle={{ paddingTop: '5px', paddingBottom: 0 }}
                    centered
                    visible={visible}
                    title="修改"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={loading} onClick={this.handleOk} >
                            提交
                        </Button>,
                    ]}>

                    <Form onFinish={this.submit} ref={node => { this.formNode = node }} layout='vertical' ref={node => { this.formNode = node }}>
                        <Form.Item name='id' label='角色ID:'>
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item name='name' rules={formRules.name} label='角色名称:'>
                            <Input disabled={loading} />
                        </Form.Item>
                        <Form.Item name='description' rules={formRules.description} label='角色描述:'>
                            <Input disabled={loading} />
                        </Form.Item>
                        <Form.Item name='status' label='角色状态:' valuePropName='checked'>
                            <Switch disabled={loading} checkedChildren="已启用" unCheckedChildren="已禁用" />
                        </Form.Item>
                    </Form>

                </Modal>
            </div>
        )
    }
}
